<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>一言</title>
  <style>
    div {
      width: 500px;
      margin: auto;
      text-align: center;
    }
    #hitokoto{
      font-size: 27px;
    }
    p {
      font-size: 20px;
    }

    #btn {
      padding: 15px 50px;
      border: 0;
      background: #00caeb;
      color: #fff;
      font-size: 22px;
      border-radius: 5px;
      cursor: pointer;
    }

    .cc{
      display: block;
      text-align: right;
      padding-right: 20px;
      font-size: 25px;
    }
  </style>
</head>

<body>
  <div>
    <p id="hitokoto"></p>
    <p class="cc">『
      <span id="from"></span>』</p>
  </div>
  <div>
    <button id="btn" onclick="window.location.reload();">
      换一换
    </button>
  </div>
  <!-- 以下写法，选取一种即可 -->

  <!-- 现代写法，推荐 -->
  <!-- 兼容低版本浏览器 (包括 IE)，可移除 -->
  <script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
  <!--End-->
  <script>
    fetch('https://v1.hitokoto.cn')
      .then(function (res) {
        return res.json();
      })
      .then(function (data) {
        var hitokoto = document.getElementById('hitokoto');
        hitokoto.innerText = data.hitokoto;
      })
      .catch(function (err) {
        console.error(err);
      })
  </script>

  <!-- 老式写法，兼容性最忧 -->
  <script>
    
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'https://v1.hitokoto.cn');
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        var data = JSON.parse(xhr.responseText);
        var hitokoto = document.getElementById('hitokoto');
        var from = document.getElementById('from');
        hitokoto.innerText = data.hitokoto;
        from.innerText = data.from;
      }
    }
    xhr.send();
  </script>

  <!-- 新 API 方法， 十分简洁 -->
  <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
</body>

</html>